<template>
  <div>
    <button @click="isShow = !isShow">点击切换显示盒子</button>
    <!-- 
      应用场景:
      如果需要频繁切换显示隐藏, 推荐使用 v-show
      如果不需要频繁切换, 推荐使用 v-if
     -->
    <!-- v-show: 控制样式 display: none -->
    <div v-show="isShow" style="background-color: yellow;">我用 v-show 控制</div>
    <!-- v-if: 控制元素的创建或删除 -->
    <div v-if="isShow" style="background-color: yellowgreen">我用 v-if 控制</div>
    <hr>
    <!-- 可以通过 v-if 来实现互斥的效果 -->
    <h1 v-if="isLogin">尊贵的超级 VIP, 您好!</h1>
    <!-- 注意: v-if 和 v-else 的元素中间, 不能再有其他元素(注释除外) -->
    <h1 v-else>您还没登录呢!傻子!</h1>
    <hr>
    <h1 v-if="age >= 60">60 以上, 广场舞</h1>
    <h1 v-else-if="age >= 30">30 以上, 打麻将</h1>
    <h1 v-else-if="age >= 20">20 以上, 蹦迪</h1>
    <h1 v-else>20 以下, 唱跳RAP孤勇者</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 如果默认值是 false, v-show 的元素
      isShow: false,
      // 是否登录
      isLogin: true,
      age: 15
    }
  },
  methods: {
  }
}
</script>

<style>
div {
  width: 600px;
  height: 200px;
}
</style>